<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home">Home,$attrs和$listeners</router-link> |
      <router-link to="/about">About</router-link>|
      <router-link to="/order">keepAlive</router-link>|
       <router-link to="/mine">动画组件</router-link>|
        <router-link to="/address">vuex</router-link>|    <router-link to="/test">vuex练习</router-link>
    </div>

    <!-- keepAlive包裹 动态切换的组件 
      可以缓存组件 
      keep-alive 会产生俩个新的生命周期
      activated激活  deactivated失活 代表组件的激活组  失活
      如  <component is="组件名"></component> 组件 router-view组件等
       keep-alive 有俩个属性 
       include ='a,b,c'  //需要缓存的组件
        exclude='[组件的name,组件的名字]'  //不需要缓存的组件
      -->
    <!-- 缓存的组件 从 包裹keepAlive的视口 显示 -->
    <div class="layout_wrap">
      <div class="slideMenu" v-if="$store.state.navFlag">
          <slideMenu></slideMenu>
      </div>
      <div class="layout">
      
            <transition enter-active-class="animate__animated animate__backInLeft"
            leave-active-class="animate__animated animate__backOutRight">
                 <keep-alive>
                      <router-view v-if="$route.meta.KeepAlive" />
                   </keep-alive>
            </transition>
            
       
          <!-- 不缓存的组件 -->
            <transition enter-active-class="animate__animated animate__backInLeft"
            leave-active-class="animate__animated animate__backOutRight">
                <router-view v-if="!$route.meta.KeepAlive"  />
           </transition>
      </div>
    </div>
 
  </div>
</template>
<script>
import slideMenu from './views/slideMenu.vue';
export default {
    components:{slideMenu}
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.layout_wrap{
  width: 100vw;
  display: flex;
  height: 100vh;
  .slideMenu{
    width: 300px;
     height: 100vh;
     background: salmon;
  }
  .layout{
    flex:1;
     height: 100vh;
     background:blueviolet;
     overflow: scroll;
  }
}
</style>
